<template>
  <el-container class="container">
    <!-- 顶部菜单区 -->
    <el-header class="header-container" style="height: 80px">
      <div class="header-box">
        <img src="../../assets/fish.png" />
        <span>咸鱼商城后台管理</span>
      </div>
    </el-header>
    <el-container>
      <!-- 左部菜单区 -->
      <el-aside class="aside-container" style="width: 250px">
        <el-menu
          default-active="/allUser"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          router
        >
          <el-menu-item index="/allUser">
            <i class="fas fa-users-cog"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="/allProduct">
            <i class="fas fa-tags"></i>
            <span slot="title">商品列表</span>
          </el-menu-item>
          <el-menu-item index="/allOrder">
            <i class="fas fa-list-alt"></i>
            <span slot="title">订单列表</span>
          </el-menu-item>
          <el-menu-item index="/inform">
            <i class="fas fa-bell"></i>
            <span slot="title">通知列表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右部内容区 -->
      <el-main class="main-container">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}
.header-container {
  background-color: #373041;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 25px;
  color: aliceblue;
  > div {
    display: flex;
    align-items: center;
  }
  span {
    margin-left: 10px;
  }
}

.aside-container {
  background-color: #333744;
}

.main-container {
  background-color: #eaedf1;
}

.el-menu-item {
  font-size: 20px;
  i {
      padding-right: 10px;
  }
}
</style>>
